<template>
  <div class="container">
    <!-- 使用轮播图进行数据渲染 -->
    <XtxSlider :sliders="bannerList" />
    <div class="sub-list">
      <h3>全部分类</h3>
      <ul class="categroy-box">
        <li v-for="item in category.children" :key="item.id">
          <a href="javascript:;">
            <img :src="item.picture" />
            <p>{{ item.name }}</p>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { useBanner } from './service/useBanner'
import { useCategory } from './service/useCategory'
export default {
  name: 'category-index',
  setup () {
    // 按照不同的业务逻辑划分不同的逻辑函数  然后再组合回来
    // 1. 通过划分业务逻辑的方式抽象单个的小的逻辑函数
    // 2. 通用的做法：在小函数中编写所有的逻辑 最后return出去数据[方法] 然后在setup函数中调用之后结构组合回来
    // 路由缓存
    // 产生原因: path不变参数变化时 默认会走缓存 之前渲染过的组件 不再经历销毁重新的过程
    // 所有的生命周期都不会重新执行 用来获取数据的方法无法执行 新数据无法返回 页面不动

    // 如何解决？
    // 1. 破坏缓存  -  router-view 加一个独一无二的key
    // 问题: 缓存完全被破坏 所有的请求都会重新发送 性能浪费
    // 2. 得到路由切换的时机 把获取新数据的方法再执行一次
    // 特点: 复杂 + 精确控制性能高
    // 优先使用key
    const { bannerList } = useBanner()
    const { category } = useCategory()
    return {
      bannerList,
      category
    }
  }
}
</script>

<style scoped lang="less">
.sub-list {
  padding: 20px 0;
  background-color: #fff;
  margin-top: 20px;

  h3 {
    text-align: center;
    font-size: 28px;
    color: #666;
    line-height: 100px;
    font-weight: 400;
  }
}
.categroy-box {
  display: flex;
  justify-content: space-evenly;
  img {
    width: 100px;
    height: 100px;
  }
  li {
    text-align: center;
    p {
      margin-top: 10px;
    }
  }
}
</style>
